<template>
  <div >
        <tabbar>
      <tabbaritem path="/home" >
        <template v-slot:item-icon><img src="~assets/img/tabbar/category.svg" alt="" >
        </template>
        <template v-slot:item-icon-active><img src="~assets/img/tabbar/category_active.svg" alt="" >
        </template>
        <template v-slot:item-title> <p>首页</p>
        </template>
      </tabbaritem>
      <tabbaritem path="/cart" >
        <template v-slot:item-icon><img src="~assets/img/tabbar/home.svg" alt="" >
        </template>
        <template v-slot:item-icon-active><img src="~assets/img/tabbar/home_active.svg" alt="" >
        </template>
        <template v-slot:item-title> <p>分类</p>
        </template>
      </tabbaritem>      
      <tabbaritem path="/category" >
        <template v-slot:item-icon><img src="~assets/img/tabbar/profile.svg" alt="" >
        </template>
        <template v-slot:item-icon-active><img src="~assets/img/tabbar/profile_active.svg" alt="" >
        </template>
        <template v-slot:item-title> <p>购物车</p>
        </template>
      </tabbaritem>      
      <tabbaritem path="/profile" >
        <template v-slot:item-icon><img src="~assets/img/tabbar/shopcart.svg" alt="" >
        </template>
        <template v-slot:item-icon-active><img src="~assets/img/tabbar/shopcart_active.svg" alt="" >
        </template>
        <template v-slot:item-title> <p>我的</p>
        </template>
      </tabbaritem>
    </tabbar>
  </div>
</template>

<script>
import tabbar from "components/common/Tabbar/Tabbar.vue"
import tabbaritem from "components/common/Tabbar/TabbarItem.vue"

export default {
  components: {
      tabbar,
      tabbaritem
  },
  props: {},
  data() {
    return {
    };
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style  scoped>

.active {
    color: red;
}
</style>